<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选全不选反选</title>
</head>
<body>
    <label for="basketball"><input type="checkbox" name="hobby" id="basketball"> 篮球</label>
    <label for="football"><input type="checkbox" name="hobby" id="football"> 足球</label>
    <label for="pingpangball"><input type="checkbox" name="hobby" id="pingpangball"> 乒乓球</label>
    <label for="paiball"><input type="checkbox" name="hobby" id="paiball"> 排球</label>
    <label for="glball"><input type="checkbox" name="hobby" id="glball"> 橄榄球</label>
    <label for="blball"><input type="checkbox" name="hobby" id="blball"> 玻璃球</label>
    <label for="llball"><input type="checkbox" name="hobby" id="llball"> 溜溜球</label>
    <label for="tball"><input type="checkbox" name="hobby" id="tball"> 台球</label>
<br>
<input type="button" onclick="quaxuan()" value="全选">
<input type="button" onclick="quanbuxuan()" value="全不选">
<input type="button" onclick="fanxuan()" value="反选">
</body>
<script>
    //涉及的函数
    //获取了所有的 复选框
    let hobbys = document.getElementsByName( "hobby");

    //通过代码控制 复选框的选中与不选中
    // let basketball = document.getElementById("basketball");
    // basketball.checked = false;

    function  quaxuan(){
        for(let i = 0 ; i < hobbys.length; i ++) {
            hobbys[i].checked = true;
        }
    }
    function quanbuxuan() {
        for(let i = 0 ; i < hobbys.length; i ++) {
            hobbys[i].checked = false;
        }
    }
    function fanxuan() {
        for(let i = 0 ; i < hobbys.length; i ++) {
           hobbys[i].checked = !hobbys[i].checked ;
        }
    }

</script>
</html>